<template>
  <div class="testlist" ref="testlist">
    <div class="content-body">
      <!-- 头部 -->
      <div class="search">
        <h4>考试列表</h4>
        <!-- 1111 -->
        <!-- <span class="demonstration">时间范围</span>
        <el-date-picker
                @change="dateChange"
                v-model="selectDate"
                type="daterange"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :picker-options="pickerOptions">
        </el-date-picker>
        <span class="demonstration">搜索关键字</span>
        <el-input v-model="searchMap.name" style="width: 20%" placeholder="请输入小区名称"></el-input>
        <el-button type="primary" plain @click="searchMap.pageNum=1;search()">搜索</el-button> -->
        <!-- 1111 -->
        <el-input
          placeholder="请输入内容"
          prefix-icon="el-icon-search"
          v-model="input2">
        </el-input>
        <div>
    </div>
      </div>
      <hr />
      <!-- 考试列表 表格 -->
      <div class="table-content">
        <el-table
          :data="
            tableData.slice(
              (currentPage - 1) * pageSize,
              currentPage * pageSize
            )
          "
          border
          style="width: 100%; font-size: 16px"
        >
          <el-table-column fixed align="center" prop="uuid" label="序号">
          </el-table-column>
          <el-table-column align="center" prop="examname" label="考试名称">
          </el-table-column>
          <el-table-column align="center" prop="host" label="创建人">
          </el-table-column>
          <el-table-column align="center" prop="start" label="开始时间">
          </el-table-column>
          <el-table-column align="center" prop="hours" label="时长">
          </el-table-column>
          <el-table-column align="center" prop="status" label="状态">
            <el-button type="primary" plain disabled>未提交</el-button>
          </el-table-column>
          <el-table-column align="center" fixed="right" label="操作">
            <template>
              <el-button
                type="primary"
                @click.prevent="open"
                size="small"
                align="center"
                style="font-size: 16px"
              >
                开始考试
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 底部分页器 -->
      <div class="footer">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          @prev-click="upChange"
          @next-click="nextChange"
          :page-sizes="[5, 10]"
          :page-size="pageSize"
          :current-page="currentPage"
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.length"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  mounted() {
    // 这个方式禁用esc会有提示，去不掉
    if (navigator.keyboard && navigator.keyboard.lock) {
      // 禁用esc退出全屏
      navigator.keyboard.lock(["Escape"]);
    } else {
      console.log("您的浏览器上不支持该功能");
    }
    // 这个方式去监听F11,会有监听不到的情况
    // document.onkeydown = (e) => {
    //   console.log('e: ', e)
    //   if (e.code === 'F11') e.preventDefault()
    // }

    // window.addEventListener('keydown', function(event) {
    //   //禁掉F11的全屏的默认事件,不会禁止F11的退出全屏
    //   const e = event || window.event
    //   if (e && e.keyCode === 122) {
    //     e.preventDefault()
    //   }
    // })
    // document.addEventListener('fullscreenchange', () => {
    //   this.isOpenAll = !this.isOpenAll
    //   //这些监听,可以监听到esc按键按下导致的全屏变化,但是监听不到F11的打开全屏的变化,会自动调用fullScreenEvent方法
    // })
    // document.addEventListener('mozfullscreenchange', () => {
    //   this.isOpenAll = !this.isOpenAll
    // })
    // document.addEventListener('webkitfullscreenchange', () => {
    //   this.isOpenAll = !this.isOpenAll
    // })
    // document.addEventListener('msfullscreenchange', () => {
    //   this.isOpenAll = !this.isOpenAll
    // })

    window.addEventListener("resize", this.judgeCurrentScreen);
  },
  destroyed() {
    window.removeEventListener("resize", this.judgeCurrentScreen);
  },
  methods: {
    open() {
      this.$confirm("考试期间不得退出全屏, 是否继续?", "注意", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          this.$router.push("/student/exam");
          this.fullScreen();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消操作",
          });
        });
    },

    // 全屏展示
    fullScreen() {
      this.$fullscreen.enter(this.$refs["container"], {
        wrap: false,
      });
    },
    // 判断当前的屏幕是否为全屏状态
    judgeCurrentScreen() {
      // 非全屏状态
      if (!this.checkFull()) {
        this.isFullscreen = false;
      }
      // 全屏状态
      if (this.checkFull()) {
        this.isFullscreen = true;
      }
    },
    // 判断全屏
    checkFull() {
      //判断浏览器是否处于全屏状态 （需要考虑兼容问题）
      //火狐浏览器
      var isFull =
        document.mozFullScreen ||
        document.fullScreen ||
        //谷歌浏览器及Webkit内核浏览器
        document.webkitIsFullScreen ||
        document.webkitRequestFullScreen ||
        document.mozRequestFullScreen ||
        document.msFullscreenEnabled;
      if (isFull === undefined) {
        isFull = false;
      }
      return isFull;
    },

    // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.currentPage = 1;
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
    },
    upChange(val) {
      this.currentPage -= 1;
    },
    nextChange(val) {
      this.currentPage += 1;
    },
    
  },

  data() {
    return {
      pageSize: 5,
      currentPage: 1,
      total: 100,
      tableData: [
        {
          uuid: "1",
          examname: "Java基础",
          host: "admin",
          start: "2022-10-11",
          hours: "90分钟",
          state: "已提交",
        },
        {
          uuid: "2",
          examname: "Java基础",
          host: "admin",
          start: "2022-10-11",
          hours: "90分钟",
        },
        {
          uuid: "3",
          examname: "Java基础",
          host: "admin",
          start: "2022-10-11",
          hours: "90分钟",
        },
        {
          uuid: "4",
          examname: "Java基础",
          host: "admin",
          start: "2022-10-11",
          hours: "90分钟",
        },
        {
          uuid: "5",
          examname: "Java基础",
          host: "admin",
          start: "2022-10-11",
          hours: "90分钟",
        },
        {
          uuid: "6",
          examname: "Java基础",
          host: "admin",
          start: "2022-10-11",
          hours: "90分钟",
        },
        {
          uuid: "7",
          examname: "Java基础",
          host: "admin",
          start: "2022-10-11",
          hours: "90分钟",
        },
        {
          uuid: "8",
          examname: "Java基础",
          host: "admin",
          start: "2022-10-11",
          hours: "90分钟",
        },
        {
          uuid: "9",
          examname: "Java基础",
          host: "admin",
          start: "2022-10-11",
          hours: "90分钟",
        },
        {
          uuid: "10",
          examname: "Java基础",
          host: "admin",
          start: "2022-10-11",
          hours: "90分钟",
        },
        {
          uuid: "11",
          examname: "Java基础",
          host: "admin",
          start: "2022-10-11",
          hours: "90分钟",
        },
      ],
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4,
      input2: "",
      // 11111按时间查询
      // searchMap:{"startTime":"","endTime":"","name":"","pageNum":1,"pageSize":5},
      // selectDate:['',''],
      // pickerOptions: {
      //   shortcuts: [{
      //       text: '最近一周',
      //       onClick(picker) {
      //           const end = new Date();
      //           const start = new Date();
      //           start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
      //           picker.$emit('pick', [start, end]);
      //       }
      //   }, {
      //       text: '最近一个月',
      //       onClick(picker) {
      //           const end = new Date();
      //           const start = new Date();
      //           start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
      //           picker.$emit('pick', [start, end]);
      //       }
      //   }, {
      //       text: '最近三个月',
      //       onClick(picker) {
      //           const end = new Date();
      //           const start = new Date();
      //           start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
      //           picker.$emit('pick', [start, end]);
      //       }
      //   }]
      // }
      //111111
    };
  },
};
</script>

<style lang="less" scoped>
.testlist {
  width: 100%;
  background-color: #f0f2f5;
}
.content-header {
  box-sizing: border-box;
  width: 100%;
  margin: 0 auto;
  height: 100px;
  background-color: #fff;
}
.content-body {
  width: 90%;
  height: 777px;
  margin: 0 auto;
  margin-top: 105px;
  margin-bottom: 30px;
  background-color: #fff;
  padding: 30px;
  box-sizing: border-box;
  .search {
    display: flex;
    justify-content: space-between;
    .el-input {
      width: 300px;
      margin: 20px;
    }
  }
  .table-content {
    width: 100%;
    height: 550px;
    padding-top: 30px;
    overflow: hidden;
    overflow-x:hidden;
    overflow-y:auto;
  }
  .table-content::-webkit-scrollbar {
  	display: none;
  }


  .footer {
    position: fixed;
    bottom: 50px;
    right: 110px;
    margin: 20px;
  }
}
.el-main {
  background-color: #f0f2f5;
  color: #333;
  padding: 0;
}
</style>